<!doctype html>
<html>
 <head>
  <title>Examples for the article "Improve your forms using HTML5!"</title>
  <style>
   #validation label input:valid { background:lime }
   #validation label input:invalid { background:red; color:white }
   textarea { height:4em; width:12em }
  </style>
 </head>
 <body>
  <p>Bij het laden van de pagina moet onderstaand veld de focus hebben</p>
  <form>
	<p>
		<label>Zoeken: <input autofocus name="search"></label> <input type="submit" value="Go!">
    </p>
  </form>
  <br /><br/>
  <p>Test formulier validatie</p>
  <form id="validation">
   <p><label>Naam: <input required name="name"></label></p>
   <p><label>E-mail: <input type="email" required name="email"></label></p>
   <p><label>URL: <input type="url" required name="url"></label></p>
   <p><input type="submit" value="React!"></p>
  </form>
 </body>
</html>
